Ext.define('Qms.view.token.TokenDetailsGrid', {
    extend: 'Ext.grid.Panel',
    id: 'tokenGridID',
    //title: 'Token List',
    myBindingForm: 'MyForm',

    
    setMyBindingForm: function(myBindingForm){
        this.myBindingForm = myBindingForm;
    },
    
    getMyBindingForm: function(){
        return this.myBindingForm;
    },
    
    searchTokens: function(tokenDate, searchKey){
       //Ext.Msg.alert('Search Key', visitingDate+": "+searchKey);
       var tokenStore = Ext.getStore('tokenStore');
       tokenStore.load({
            params: {
                tokenDate: tokenDate,
                searchKey: searchKey
            }
        });
    },
    
    initComponent: function() {
        var me = this;
        var tokenStore = Ext.create("Qms.data.store.TokenStore");
        Ext.applyIf(me, {
            viewConfig: {
            },
            scroll: 'both',
            columnLines: true,
            headerPosition: 'left',
            store: tokenStore,
            columns: [
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'id',
                    text: 'id',
                    width: 150,
                    hidden: true
                },
                {
                    xtype: 'templatecolumn',
                    dataIndex: 'tokenNo',
                    tpl: '<font face="calibri" size="3"><b>{tokenNo}</b></font>',
                    text: 'Token No',
                    width: 100
                },
                {
                    xtype: 'templatecolumn',
                    dataIndex: 'firstName',
                    text: 'First Name',
                    tpl: '<font face="calibri" size="3"><b>{firstName} {middleInitial} {lastName}</b></font>',
                    width: 200
                },
                {
                    xtype: 'templatecolumn',
                    dataIndex: 'mobileNo',
                    text: 'Mobile No.',
                    tpl: '<font face="calibri" size="3"><b>{mobileNo}</b></font>',
                    width: 130
                },
                {
                    xtype: 'templatecolumn',
                    dataIndex: 'destinationName',
                    text: 'Destination',
                    tpl: '<font face="calibri" size="3"><b>{destinationName}</b></font>',
                    width: 150
                },
                {
                    xtype: 'templatecolumn',
                    //dataIndex: 'lastName',
                    tpl: '<font face="calibri" size="3"><b>{tokenStatus}</b></font>',
                    hidden: true
                },
                {
                    dataIndex: 'appointmentDate',
                    hidden: true
                }

                
            ],
            listeners: {
                selectionchange: function(model, records){
                    if(records[0]){
                        //Ext.getCmp('personInfo').getForm().loadRecord(records[0]);
                        this.getMyBindingForm().getForm().loadRecord(records[0]);
                    }
                }
            },
            dockedItems: [
                {
                    xtype: 'toolbar',
                    dock: 'top',
                    items: [
                        {
                            xtype: 'datefield',
                            id: 'tokenDateTF',
                            fieldLabel: 'Select Date',
                            labelWidth: 70,
                            format: 'Y-m-d',
                            handler: function(){
                            }
                        },
                        '-',
                        {
                           xtype: 'label',
                           text: 'Search Key:'
                        },
                        {
                            xtype: 'textfield',
                            id: 'searchKeyTF',
                            name: 'searchkey'
                        },
                        {
                            xtype: 'button',
                            //text:'Search',
                            iconCls: 'searchIcon',
                            handler: function(){
                                var tokenDate = Ext.getCmp('tokenDateTF').getRawValue();
                                var searchKeyValue = Ext.getCmp('searchKeyTF').value;
                                me.searchTokens(tokenDate, searchKeyValue);
                            }
                        },
                        {
                            xtype: 'button',
                            id: 'meetingRequestButton',
                            //text: 'Refresh',
                            iconCls: 'tableRefreshIcon',
                            handler: function(){
                                    var store = Ext.getStore('tokenStore');
                                    store.load(function(records, operation, success) {
                                        console.log('Employee created and loaded in list.');
                                    });
                            }
                        },
                        '-',
                        {
                            xtype: 'tbfill'
                        },
                        {
                            xtype: 'button',
                            //text: 'Upload Image',
                            id: 'employeeImageUploadButton',
                            iconCls: 'uploadIcon',
                            handler: function(){
                                var grid = me.down('gridpanel');
                                var arraySelected =grid.getSelectionModel().getSelection();
                                var record = arraySelected[0];
                                //Ext.Msg.alert('Message',record.get('id'));
                                var uploadWindow = Ext.create('Visitors.view.employee.UploadEmployeeImage');
                                uploadWindow.setEmployeeId(record.get('id'));
                                me.createWindow(uploadWindow, 'Upload Image', 80, '40%');
                            }
                        }

                    ]
                }
            ]
        });

        me.callParent(arguments);
    }
});
